{% import 'macros.html' as nipap %}
<!DOCTYPE html>
<html lang="en" ng-app="nipapApp">
	<head>
		<title>{{ g.page_title|default('NIPAP') }}</title>
		<meta charset="utf-8">
		<link rel="stylesheet" href="{{ url_for("static", filename="css/jquery-ui-1.12.1.min.css") }}">
		<link rel="stylesheet" href="{{ url_for("static", filename="css/bootstrap-3.2.0.min.css") }}">
		<link rel="stylesheet" href="{{ url_for("static", filename="css/nipap.css") }}?v={{ g.www_version }}">
		<link rel="stylesheet" href="{{ url_for("static", filename="css/jquery.tagit.css") }}">
		<link rel="stylesheet" href="{{ url_for("static", filename="css/ng-tags-input-2.1.1.min.css") }}">
		<script src="{{ url_for("static", filename="jquery-3.3.1.min.js") }}"></script>
		<script src="{{ url_for("static", filename="jquery.url.js") }}"></script>
		<script src="{{ url_for("static", filename="jquery-ui-1.12.1.min.js") }}"></script>
		<script src="{{ url_for("static", filename="angular-1.7.2.min.js") }}"></script>
		<script src="{{ url_for("static", filename="angular-route-1.7.2.min.js") }}"></script>
		<script src="{{ url_for("static", filename="ui-bootstrap-tpls-1.3.3.min.js") }}"></script>
		<script src="{{ url_for("static", filename="app.js") }}?v={{ g.www_version }}"></script>
		<script src="{{ url_for("static", filename="filters.js") }}?v={{ g.www_version }}"></script>
		<script src="{{ url_for("static", filename="services.js") }}?v={{ g.www_version }}"></script>
		<script src="{{ url_for("static", filename="directives.js") }}?v={{ g.www_version }}"></script>
		<script src="{{ url_for("static", filename="controllers.js") }}?v={{ g.www_version }}"></script>
		<script src="{{ url_for("static", filename="ng-infinite-scroll.min.js") }}"></script>
		<script src="{{ url_for("static", filename="tag-it.min.js") }}" type="text/javascript" charset="utf-8"></script>
		<script src="{{ url_for("static", filename="ng-tags-input-2.1.1.min.js") }}"></script>
		<script src="{{ url_for("static", filename="Chart.min.js") }}" type="text/javascript" charset="utf-8"></script>
		<script src="{{ url_for("static", filename="nipap.js") }}?v={{ g.www_version }}"></script>
		<script>
			$(function() {

				popped = ('state' in window.history && window.history.state !== null);
				initialURL = location.href;

				$(document).ajaxError(ajaxErrorHandler);
				{% if session.user is defined %}

				// Handle click to open VRF filter search box
				$('#add_vrf_filter_btn').click(
					function(evt) {

						// Update list of selected VRFs - a selected VRF might have
						// been removed by another user
						$.getJSON('/xhr/get_current_vrfs', receiveCurrentVRFs);

						showVRFSelectorMenu(clickFilterVRFSelector, $('#add_vrf_filter_btn'));
						evt.preventDefault();

					}
				);

				// Fetch currently selected VRFs
				$.getJSON('/xhr/get_current_vrfs', receiveCurrentVRFs);

				{% endif %}

				/*
				 * Get scope & $compile from AngularJS, needed when adding
				 * elements containing AngularJS directives from jQuery.
				 *
				 * This is wrong, but used to assist during the transition
				 * to a full AngularJS application.
				 */
				ng_scope = angular.element($('html')).scope();
				ng_compile = angular.element($('html')).injector().get('$compile');
			});
		</script>
		{% block head %}
		{% endblock %}
	</head>
	<body {% block body_attributes %}{% endblock %}>
		<div class="top_menu">
			<div class="menu_entry">
				<div style="font-size: 10pt; color: #CCCCCC; line-height: 37px; font-weight: bold; float: left;">
					VRF
				</div>
				<div id="vrf_filter_container" style="float: left;">
					<div class="vrf_filter_heading" id="first_vrf_filter_entry" data-vrf=""></div>
					<div class="vrf_filter_heading" id="second_vrf_filter_entry" data-vrf=""></div>
					<div class="vrf_filter_heading" id="extra_vrf_filter_entry" style="display: none;"></div>
				</div>
				<a href="#" class="add_btn" id="add_vrf_filter_btn">+</a>
			</div>
			<div class="menu_entry" style="position: absolute; left: 43%; padding-top: 0px;">
				<ol style="display: block; list-style: none outside none; margin: 0; padding: 0;">
					<li style="display: inline-block; padding: 0; margin: 0;">
					<a href="/ng/vrf#/vrf/list" class="menu_link {% if page == 'vrfs' -%}menu_link_active{%- endif -%}">VRFs</a>
					</li>
					<li style="display: inline-block; padding: 0; margin: 0;">
					<a href="{{ url_for('prefix.list') }}" class="menu_link {% if page == 'prefixes' -%}menu_link_active{%- endif -%}">prefixes</a>
					</li>
					<li style="display: inline-block;">
					<a href="/ng/pool#/pool/list" class="menu_link {% if page == 'pools' -%}menu_link_active{%- endif -%}">pools</a>
					</li>
				</ol>
			</div>
			<div class="menu_entry" style="position: absolute; right: 30px; padding-top: 0px;">
				<ol style="display: block; list-style: none outside none; margin: 0; padding: 0;">
					<li style="display: inline-block; padding: 0; margin: 0;">
					<a href="{{ url_for('auth.logout') }}" class="menu_link">Log out</a>
					</li>
				</ol>
			</div>
		</div>
		{% block menu %}
		{% endblock %}
		{% block raw_content %}
		{% endblock %}
		<div class="content_outer">
			<div class="content_inner">
				{% block content %}
				{% endblock %}
			</div>
			<div style="height: 500px;"> &nbsp; </div>
		</div>
		<div class="version"><a href="{{ url_for('version.show_version') }}">v{{ g.www_version }}</a></div>
	</body>
</html>
